<template>
  <div class="good-list">
    <!-- 筛选面板 -->
    <el-row :gutter="20">
      <el-col :span="5">
        <el-input v-model="username" placeholder="请输入用户名" />
      </el-col>
      <el-col :span="5">
        <el-input v-model="userphone" placeholder="请输入手机号" />
      </el-col>
      <el-col :span="2">
        <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" icon="el-icon-download" @click="handleExport">导出</el-button>
      </el-col>
    </el-row>

    <!-- 表格 -->
    <el-table id="tableId" :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" border
      style="width: 100%">
      <el-table-column align="center" prop="id" label="用户ID" sortable />
      <el-table-column align="center" prop="username" label="用户名" />
      <el-table-column align="center" prop="mobile" label="手机号码" width="180" />
      <!-- <el-table-column align="center" prop="sex" label="性别">
            </el-table-column> -->
      <el-table-column prop="gender" align="center" label="性别">
        <template slot-scope="scope">
          <el-tag :type="scope.row.gender == 0 ? 'primary' : 'warning'" disable-transitions>{{
              scope.row.gender == 0 ? '未知' : '男'
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="birth" label="生日" />
      <!-- <el-table-column align="center" prop="userLevel" label="用户等级">
            </el-table-column> -->
      <el-table-column prop="userLevel" align="center" label="用户等级">
        <template slot-scope="scope">
          <el-tag :type="scope.row.userLevel === 0 ? 'primary' : 'warning'" disable-transitions>{{
              scope.row.userLevel == 0 ? '普通用户' : '会员'
          }}</el-tag>
        </template>
      </el-table-column>
      <!-- <el-table-column align="center" prop="status" label="状态">
            </el-table-column> -->
      <el-table-column prop="status" align="center" label="状态"
        :filters="[{ text: '可用', value: 0 }, { text: '不可用', value: 1 }]" :filter-method="filterTag"
        filter-placement="bottom-end">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status === 0 ? 'primary' : 'warning'" disable-transitions>{{
              scope.row.status == 0 ? '可用' : '不可用'
          }}</el-tag>
        </template>
      </el-table-column>

    </el-table>

    <!-- 分页 -->
    <el-pagination style="margin-top: 30px" :current-page="currentPage" :page-sizes="[2, 5, 10, 20]"
      :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"
      @size-change="handleSizeChange" @current-change="handleCurrentChange" />

  </div>
</template>
<script>
import FileSaver from 'file-saver'
import * as XLSX from 'xlsx'
import { userList } from '../../api/ml-user'

export default {
  name: 'User',
  props: [],
  data() {
    return {
      username: '',
      userphone: '',
      tableData: [],
      total: 0, // 总条数
      currentPage: 1, // 当前页码
      pageSize: 2 // 每页的数据条数
    }
  },
  created() {
    this.getData()
  },
  methods: {
    // 获取数据
    getData() {
      userList().then(res => {
        console.log(res)
        if (res.errno == 0) {
          this.tableData = res.data.items,
            this.total = res.data.total
        }
      })
    },

    // 点击导出
    handleExport() {
      var xlsxParam = { raw: true }
      const fix = document.querySelector('.el-table__fixed')
      let wb
      // 判断有无fixed定位，如果有的话去掉，后面再加上，不然数据会重复
      if (fix) {
        wb = XLSX.utils.table_to_book(
          document.querySelector('#tableId').removeChild(fix), xlsxParam
        )
        document.querySelector('#tableId').appendChild(fix)
      } else {
        wb = XLSX.utils.table_to_book(document.querySelector('#tableId'), xlsxParam)
      }
      var wbout = XLSX.write(wb, {
        bookType: 'xlsx',
        bookSST: true,
        type: 'array'
      })
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: 'application/octet-stream' }),
          '导出详情单.xlsx'
        ) // 文件名
      } catch (e) {
        if (typeof console !== 'undefined') console.log(e, wbout)
      }
      return wbout
    },
    // 点击搜索
    handleSearch() {
      if (this.username != '') {
        var newtabData1 = []
        this.tableData.forEach(item => {
          if (item.username == this.username) {
            newtabData1.push(item)
          }
        })
        this.tableData = newtabData1
        if (this.userphone != '') {
          var newtabData2 = []
          this.tableData.forEach(item => {
            if (item.mobile == this.userphone) {
              newtabData2.push(item)
            }
          })
          this.tableData = newtabData2
        }
      } else {
        if (this.userphone != '') {
          var newtabData3 = []
          this.tableData.forEach(item => {
            if (item.mobile == this.userphone) {
              newtabData3.push(item)
            }
          })
          this.tableData = newtabData3
        } else {
          this.getData()
        }
      }
    },
    // 筛选tag
    filterTag(value, row) {
      console.log(value)
      // console.log(row);
      return row.status === value
    },
    //
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.currentPage = 1
      this.pageSize = val
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.currentPage = val
    }
  }
}
</script>

<!-- scss -->
<style lang="scss" scoped>
.good-list {
  padding: 20px;
  box-sizing: border-box;

  .el-table {
    margin-top: 20px;
  }

}
</style>
